<template>
  <div class="randoms-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <!-- form表单 -->
      <div>
        <el-form class="header" label-width="80px" size="normal">
          <el-form-item label="关键字">
            <el-input
              v-model="keyword"
              placeholder="根据编号搜索"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="sendOtherP"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 显示的条数 -->
      <div class="count">
        <span class="el-icon-info"> 数据一共{{ total }}条数据</span>
      </div>
      <el-table :data="tableList" style="width: 100%" text-align="center">
        <el-table-column prop="id" label="编号" width="220"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="160">
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="220">
          <template slot-scope="scope">
            <!-- <div v-for="tableList in scope.row.questionIDs" :key="tableList.number">
            <a href="#" style="color:#09f" @click.prevent="openPrevies(tableList)">{{tableList.number}}</a>
            <a href="#" style="color:#09f">{{tableList.number}}</a>
          </div> -->
            <el-button
              text-align="left"
              type="text"
              v-for="tableList in scope.row.questionIDs"
              :key="tableList.number"
              @click="
                isSel = true;
                openPrevies(tableList.id);
              "
              >{{ tableList.number }}</el-button
            >
            <!-- 弹出层题目预览 -->
            <!-- <el-dialog
              title="题目预览"
              append-to-body
              :visible.sync="isShow"
              width="68%"
            > -->
            <!-- 组件（复用） -->
            <!-- 通过getSelImg回调函数获取选中的图片 -->
            <!-- </el-dialog> -->
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="removeRandoms(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 预览试题组件 -->
      <el-preview v-if="isSel" :isShow.sync="isSel" :queId="queid"></el-preview>

      <!-- /数据列表 -->
      <!-- 列表分页 -->
      <el-pagination
        class="page"
        style="text-align: right"
        layout="prev, pager, next,total,sizes,jumper"
        background
        :page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="20"
        :current-page='page'
        :total="total"
        @size-change="handleSizeChange"
        @current-change="pageChange"
      />

      <!-- </el-pagination> -->
      <!-- /列表分页 -->
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import ElPreview from '@/module-hmmm/components/questions-preview.vue'
const questionType = [
  '单选', '多选', '简答'
]
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ElPreview
  },
  data () {
    return {
      // 弹出框需要的数据
      item: {},
      // 列表数据
      tableList: [],
      // 每页显示条数
      per_page: 5,
      // 当前的页码
      page: 1,
      // 数据总计
      total: 0,
      keyword: '',
      // 弹出框开关
      isSel: false,
      // 弹框需要的id值
      queid: 0,
      // 搜索状态
      isSeach: false
    }
  },
  created () {
    // if (this.isSeach) {
    //   this.randoms(this.page)
    // }
    this.randoms()
  },
  methods: {
    // 获取数据
    async randoms () {
      const pormis = {
        page: this.page,
        pagesize: this.per_page,
        keyword: this.keyword
      }
      console.log(pormis)
      const { data } = await randoms(pormis)
      data.items.forEach((item) => {
        item.questionType = questionType[item.questionType - 1]
      })
      this.total = data.counts
      this.tableList = data.items
      console.log(this.tableList)
      this.isSeach = false
    },
    // 清除
    clear () {
      this.keyword = null
      this.randoms()
    },
    // 搜索
    sendOtherP () {
      console.log(this.keyword)
      console.log(this.page)
      this.page = 1
      this.randoms()
    },
    // 窗口
    openPrevies (id) {
      console.log(id)
      this.queid = id
    },
    pageChange (e) {
      this.page = e

      this.randoms()
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.per_page = val
      this.randoms()
    },
    // 删除数据
    removeRandoms (item) {
      console.log(item)
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        try {
          removeRandoms({ item: item }).then(
            (res) => {
              this.$message({
                message: '删除成功', type: 'success'
              })
            }
          )
        } catch (error) {
          console.warn(error)
          this.$message({
            message: '删除失败', type: 'error'
          })
        }
      }).catch(() => {
        console.log('取消')
      })
    }
  }
}
</script>

<style scoped lang='less'>
.randoms-container {
  margin: 10px;
  .header {
    display: flex;
    justify-content: space-between;
  }
  .count {
    width: 100%;
    height: 40px;
    background-color: #eee;
    color: darkgrey;
    border-radius: 5px;
    line-height: 40px;
    padding-left: 20px;
    font-size: 14px;
    margin-bottom: 15px;
  }
  .page {
    margin-top: 20px;
  }
}
</style>
